<template>
	<view class="content">
        <scroll-view scroll-x="true" style="height: 1000rpx;white-space: nowrap;" refresher-enabled="true" :refresher-triggered="refresh" @refresherrefresh="onRefresh">
        	<view class="cart_box" v-for="(it,i) in cart_list" :key="i">
        		<u-checkbox-group  placement="column">
        			<u-checkbox :checked='it.checked'  @change="checkboxChange(it)" :customStyle="{marginBottom: '8px'}"  activeColor="red" >
        			</u-checkbox>
        		</u-checkbox-group>
        		<view class="cart_banner">
        			<image :src='it.img' class="cart_img"></image>
        			<view class="cart_t">
        				<label>{{it.title}}</label>
        				<label>{{it.sku}}</label>
        				<view class="cart_in">
        					<span v-for="(ie,j) in it.insure" :key="j" >{{ie}}</span>
        				</view>
        				<view class="price_box">
        					<label>￥{{it.price}}</label>
        					<view>
        						<u-number-box :disabledInput="true" v-model="it.number" @change="valChange" ></u-number-box>
        					</view>
        				</view>
        			</view>
        		</view>
        	</view>	
        </scroll-view>
		
		<!-- 底部部分 -->
		<view class="foot_box">
			<view class="foot_view">
				<u-checkbox-group  placement="column" >
					<u-checkbox @change="allcheckboxChange" :customStyle="{marginBottom: '8px'}" v-model="allcheckbox" label='全选' activeColor="red" >
					</u-checkbox>
				</u-checkbox-group>
				<view class="submitTo">
					<label>共计：{{total_price}}</label>
					<label>去结算</label>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props:['cart_list'],
		data() {
			return {
				// 总价
				total_price:0,
				// 是否全选
				allcheckbox:false,
				refresh: false,
			
			}

		},
		
		created() {
			this.countPrice()
		},
		methods: {
			checkboxChange(n) {
				console.log('change', n);
				n.checked=!n.checked
				// 计算总价
				this.countPrice()
			},
			valChange(e) {
				// console.log('当前值为: ' + e.value,this.cart_list)
				setTimeout(() => {
						this.countPrice()
					})
			},
			// 计算价格
			countPrice(){
				console.log('4545',this.cart_list)
				let pirce=0
				for(var i=0;i<this.cart_list.length;i++){
					if(this.cart_list[i].checked==true){
						console.log(this.cart_list[i].number)
						pirce+=this.cart_list[i].price*this.cart_list[i].number
					}
				}
				this.total_price=pirce
				console.log('总价',pirce)
			},
			// 是否全选
			allcheckboxChange(){
				this.allcheckbox = !this.allcheckbox;
				console.log(this.allcheckbox)
				if (this.allcheckbox) {
					 for(var i=0;i<this.cart_list.length;i++){
						this.cart_list[i].checked=true
					 }
				} else {
					for(var i=0;i<this.cart_list.length;i++){
						this.cart_list[i].checked=false
					}
				 
				}
				this.countPrice()
			},
			
			onRefresh() {
				this.refresh= true;
				uni.showToast({
					title:"触发了下拉刷新",
					duration:1500,
					icon:"none"
				})
				// 这里不能直接让refresh直接为false，否则可能会发生下拉加载无法复位的情况
				setTimeout(() => {
					this.refresh = false;
				}, 500)
			}
			
		}
	}
</script>
<style lang="scss" scoped>
	.cart_box {
		width: 96%;
		margin-left: 2%;
		margin-top: 20px;
		display: flex;
		align-items: center;
	}

	.cart_banner {
		display: flex;

		.cart_img {
			width: 140rpx;
			height: 150rpx;
			margin-left: 20rpx;
		}

		.cart_t {
			width: 260px;
			margin-left: 20rpx;


			& label:nth-child(1) {
				width: 260px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: bold;
				display: block;
			}
			& label:nth-child(2) {
				color: #666;
				font-size: 14px;
				padding: 10rpx 0;
				display: block;
			}
			.cart_in{
				display: flex;
				& span{
					
					// transform: scale(0.7);
					font-size: 12px;
					
					padding: 5rpx 10rpx;
					margin-left: 10rpx;
				}
				& span:nth-child(1){
					margin-left: 0;
				}
			}

			.price_box {
				margin-top: 10rpx;
				width: 100%;
				display: flex;
				align-items: center;
				& label:nth-child(1){
					color: red;
				}
			}
		}
		
	}
	.foot_box{
		position: fixed;
        box-shadow: 0px 1px 4px 1px #E5E9F2;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		// border: 1px solid red;
		.foot_view{
			width: 96%;
			margin-left: 2%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 120rpx;
			.submitTo{
				display: flex;
				align-items: center;
				& label:nth-child(1){
					margin-right: 30rpx;
					color: red;
				}
				& label:nth-child(2){
					background-color: red;
					color: #fff;
					padding: 16rpx 20rpx;
					border-radius: 10rpx;
					font-size: 14px;
					
				}
			}
			
		}
	}
</style>